<template>
  <div class="form-setting-panel">
    <p class="form-design-warning">{{ $t('contract.setting.systemTips') }}{{ field.displayName }}</p>

    <!-- start 标题 -->
    <form-title-setting :field="field" :setting="setting" @input="updateForDom"></form-title-setting>
    <!-- end 标题 -->

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{ $t('common.base.check') }}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting :field="field" @input="update"></form-required-setting>
      </div>
    </div>
    <!-- end 校验 -->

    <!-- start 显示字段 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{ $t('product.materialsBillSetting.showFieldTitle') }}</h4>
      <div class="form-item-box">
        <el-select v-model="productWarrantyFieldValue" value-key="fieldName" multiple class="material-select">
          <el-option v-for="item in productWarrantyFieldOptions" :key="item.fieldName" :label="item.displayName" :value="item" :disabled="checkFieldDisabledHandler(item)"></el-option>
        </el-select>
      </div>
    </div>
    <!-- end 显示字段 -->
  </div>
</template>

<script>
/* mixin */
import SettingMixin from '@src/component/form/mixin/setting';
import FormSubFormMixin from '@src/component/form/mixin/form.subForm';
/* props */
import { settingProps } from '@src/component/form/components/props';

import * as FormUtil from '@src/component/form/util';

import { getServiceItemColumn } from '@src/modules/productV2/productWarrantyServiceItem/productWarrantyItemListPage/fields.js';
export default {
  name: 'form-product-warranty-service-setting',
  mixins: [SettingMixin, FormSubFormMixin],
  props: settingProps,
  data() {
    return {
      fieldsList: getServiceItemColumn(),
    };
  },
  computed: {
    /** 子表单字段 */
    subformFields() {
      return this.field?.subFormFieldList || [];
    },
    productWarrantyFieldValue: {
      get() {
        return this.subformFields;
      },
      set(value) {
        this.update(value, 'subFormFieldList');
      },
    },
    // 下拉框数据
    productWarrantyFieldOptions() {
      let fields = this.fieldsList.map(field => {
        return {
          ...field,
          id: null,
          // formType: 'relateProductWarrantyService', // 用统一的类型
          setting: {
            ...(field.setting || {}),
            originalFormType: field.formType, // 存储原本的类型
          },
          parentFieldId: this.field.fieldName || '',
          fieldName: field.fieldName, // 拼接fieldName防止重复
        };
      });
      return FormUtil.toFormField(fields);
    },
  },
  mounted() {
    this.productWarrantyFieldValue = this.initProductRelatedFields();
  },
  methods: {
    /* 初始化关联显示字段 */
    initProductRelatedFields() {
      // 无值时设置默认值
      if (!this.productWarrantyFieldValue.length) {
        let fields = this.productWarrantyFieldOptions.filter(field => this.checkFieldDisabledHandler(field));
        return fields;
      }

      return this.subformFields;
    },
    // 服务开始时间, 服务结束时间默认选中，禁止点击
    checkFieldDisabledHandler(field) {
      const fieldNameArr = ['svcProjectName'];
      let fieldName = field.fieldName;
      return fieldNameArr.includes(fieldName);
    },
  },
};
</script>
<style lang="scss" scoped>
.material-select {
  width: 100%;
  margin-top: 10px;
  ::v-deep .el-tag:nth-child(1) {
    .el-tag__close {
      display: none;
    }
  }
}
</style>
